import React, { useState, useEffect } from 'react'
import store from '../redux/store'
import getCinemaListAction from '../redux/action/getCinemaListAction'


export default function Cinemas(props) {
  const [cityName] = useState(store.getState().CityReducer.cityName)
  const [cinemaList, setList] = useState(store.getState().CinemaReducer.list)
  useEffect(() => {
    if (store.getState().CinemaReducer.list.length === 0) {
      store.dispatch(getCinemaListAction())
    } else {
      console.log("store cache");
    }
    var unsub = store.subscribe(() => {
      setList(store.getState().CinemaReducer.list)
    })
    return () => {
      // 取消订阅
      unsub()
    }
  }, [])
  return (
    <div>
      <div style={{ overflow: "hidden" }}>
        <div style={{ float: "left" }} onClick={
          () => {
            props.history.push('/city')
          }
        }>{cityName}</div>
        <div style={{ float: "right" }} onClick={
          () => {
            props.history.push('/cinemas/search')
          }
        }>搜索</div>
        {
          cinemaList.map(item =>
            <dl key={item.cinemaId} style={{ padding: "10px" }}>
              <dt>{item.name}</dt>
              <dd style={{ fontSize: "12px", color: "gray" }}>{item.address}</dd>
            </dl>
          )
        }
      </div>
    </div>
  )
}
